<template>
	<div class="flex flex-col w-full h-full overflow-auto px-[35px]">
		<div v-if="loading" class="h-full flex flex-row justify-center items-center">
			<BaseLoading class="mt-4 text-center" block></BaseLoading>
		</div>
		<template v-else>
			<div class="flex flex-row w-full py-[5px]">
				<div
					class="relative w-[30px] h-[30px] rounded-full bg-bg-3 flex items-center justify-center">
					<BaseIcon class="text-[20px] text-t-1" name="broadcast" />
				</div>
				<div class="flex-1 px-[6px] text-xs">
					<div>{{ noticeDetail.noticeName }}</div>
					<div class="text-t-2">{{ fmtDateTime(noticeDetail.startTime) }}</div>
				</div>
				<div
					class="w-[50px] flex items-center flex-row-reverse"
					v-if="noticeDetail.noticeType !== 4">
					<BaseButton size="tiny" :block="false" class="ml-4" @click="handleDelete">
						{{ $t('action.delete') }}
					</BaseButton>
				</div>
			</div>
			<div
				class="text-t-2 my-5 whitespace-pre-wrap rich-text-area"
				ref="richTextAreaRef"
				v-html="noticeDetail.content"></div>
		</template>
	</div>
</template>
<script lang="ts" setup>
import { nextTick, onBeforeMount, ref } from 'vue'
import { BaseLoading, BaseIcon, BaseButton } from '@/components/base'
import { getNoticeDetail, removeNoticeMessages } from '@/api/notice'
import { fmtDateTime } from '@/utils'
import { useAppStore, useProfileStore } from '@/store'
import { isObject } from 'lodash-es'
import { useDialog, useMessage } from '@/hooks'
import { jumpRouteUrl } from '@/utils'

const loading = ref(false)
const noticeDetail = ref({
	noticeName: '',
	noticeType: null,
	startTime: '',
	content: '',
	id: 0,
	noticeId: 0
})
const message = useMessage()
const emit = defineEmits(['back'])
const dialog = useDialog()
const appStore = useAppStore()
const richTextAreaRef = ref()
const props = defineProps({
	selectId: {
		type: Number,
		default: 0
	}
})

const getDetail = async () => {
	loading.value = true
	try {
		const params = {
			noticeId: props.selectId,
			locale: appStore.lang
		}
		const { data } = await getNoticeDetail(params)
		noticeDetail.value = data
		if (data.noticeType === 4) {
			if (Array.isArray(data.content)) {
				noticeDetail.value.content = data.content
					.map((item: { [x: string]: any }) => {
						if (isObject(item)) {
							return `<div style='border: 1px solid var(--color-border-2); padding: 10px; border-radius: 10px'>${Object.keys(
								item
							)
								.map((key) => {
									return `<div><span class='app-font-bold'>${key}</span>: <span>${item[key]}</span></div>`
								})
								.join('')}</div>`
						} else {
							return ''
						}
					})
					.join('<br/>')
			}
		}
	} catch {
	} finally {
		loading.value = false
		nextTick(() => {
			addEvent()
		})
	}
}

const handleDelete = () => {
	console.log('delete')
	dialog.warning({
		titleT: 'action.delete',
		contentT: 'notice.delete.tip',
		confirmTextT: 'action.delete',
		cancelTextT: 'action.cancel',
		confirmFn: async () => {
			console.log('delete')
			// 执行删除操作，emit删除成功逻辑
			try {
				await removeNoticeMessages({
					noticeType: noticeDetail.value.noticeType,
					noticeId: noticeDetail.value.id || noticeDetail.value?.noticeId
				})
				message.success()
				emit('back')
			} catch (err) {
				message.error(err)
			}
		},
		cancelFn: () => {
			console.log('cancel')
		}
	})
}

const addEvent = () => {
	console.log(richTextAreaRef.value)
	if (richTextAreaRef.value) {
		const profileStore = useProfileStore()
		richTextAreaRef.value.addEventListener('click', (event: any) => {
			let target = event.target
			while (target) {
				if (target instanceof HTMLAnchorElement) {
					const href = target.getAttribute('href') || ''
					if (href.indexOf('http') === -1) {
						event.stopImmediatePropagation()
						event.preventDefault()
						jumpRouteUrl(href)
						profileStore.showNotice({
							show: false
						})
					}
					return
				}
				target = target.parentNode
			}
			const href = event.target.dataset?.href
			if (href) {
				jumpRouteUrl(href)
				profileStore.showNotice({
					show: false
				})
			}
		})
	}
}

onBeforeMount(() => {
	getDetail()
})
</script>
